{include file="common/header"/}
<!--自定义JS-->
<!--<script src="__DEMO__/index_v2.js"></script>-->
</head>
<body class="gray-bg">
<div class="wrapper">
    <div class="row">
        <div class="layui-row">
            <!--筛选条件-->
            <div class="layui-col-xs6">
                <form class="layui-form" action="">
                    <div class="layui-inline">

                            <input type="text" class="layui-input" id="search_date" placeholder="开始 到 结束">

                    </div>
                    <div class="layui-inline">
                            <a style="margin-left: 10px" href="#">高级搜索</a>

                    </div>
                </form>
            </div>
            <div class="layui-col-xs6 ">
                <div class="float_right">
                    <button type="button" class="layui-btn layui-btn-primary ">导入</button>
                    <button type="button" class="layui-btn">导出</button>
                    <button type="button" class="layui-btn layui-btn-normal show-add-html-htn">添加</button>
                </div>
            </div>
        </div>
        <!--//库存数据表格-->
        <table class="layui-hide" id="customer_table" lay-filter="customer"></table>



        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            <!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="recode">记录</a>-->
        </script>
    </div>
</div>
<script>
    layui.use(['table', 'laydate','form'], function () {
        var table = layui.table;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var form = layui.form;

        laydate.render({
            elem: '#search_date'
            , type: 'datetime'
            , range: '到'
            , format: 'yyyy年M月d日'
        });
        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow

        //方法级渲染
        var tableIns = table.render({
            elem: '#customer_table'
            ,url: '{:url("/printer/Customer/getData")}'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'id', title: 'ID', width:60, sort: true, fixed: true}
                ,{field:'user_name', title: '客户姓名', width:100, fixed: true}
                ,{field:'tel', title: '联系电话',width:120, fixed: true}
                ,{field:'unit_name', title: '单位名称',width:300}
                ,{field:'duty_num', title: '税号',width:200}
                ,{field:'address', title: '单位地址',width:300}
                , {
                    field: 'pay_period',
                    fixed: 'right',
                    event: 'set_pay_period',
                    style: 'cursor: pointer;',
                    title: '支付周期',
                    width: 100,
                    templet: function (res) {
                        //1:正在出货2:交付完成3:已开票4:货款已付清
                        var pay_period = {};
                        pay_period[1] = '货到付款';
                        pay_period[2] = '月付';
                        pay_period[3] = '季度付';
                        pay_period[4] = '半年付';
                        pay_period[5] = '其他';
                        return '<em>' + pay_period[res.pay_period] + '</em>'
                    }
                }
                ,{field:'comment', title: '备注',width:300}
                ,{field:'create_time', title: '创建时间',width:165,fixed: 'right',}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo',width:120}
            ]]
            ,id: 'customer_table_eload'
            ,page: true
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        table.on('tool(customer)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    del(data.id);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.msg('正在开发中');return;
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }else if(obj.event === 'recode'){
                layer.msg('正在开发中');return;
            }
        });

        //操作js
        //点击添加按钮
        function show_add_html() {
            $.ajax({
                url: '{:url("/printer/Customer/add")}',
                type: 'get',
                dataType: 'html',
                cache: false,
                async: true,
                beforeSend: function () {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'], time: 3 * 1000 //0.1透明度的白色背景
                    });
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    layer.open({
                        type: 1,
                        title:'添加客户信息',
                        content: res,
                        area: ['100%', '80%'],
                        shadeClose:true,
                        maxmin:true,
                        end:function(){
                            table.reload('customer_table_eload', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            }, 'data');
                        }
                    });
                    form.render('select');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('网络失败，请联系管理员', {icon: 2});
                }
            });
        }
        $(document).on('click', '.show-add-html-htn', function () {
            show_add_html();
        });
        //删除
        function del(id){
            $.ajax({
                url: '{:url("/printer/Customer/del")}',
                type: 'get',
                data : {id:id},
                cache: false,
                async: true,
                beforeSend: function () {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'], time: 3 * 1000 //0.1透明度的白色背景
                    });
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    if(res.code > 0){
                        layer.msg(res.msg);
                        table.reload('customer_table_eload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }, 'data');
                        return false;
                    }else{
                        layer.msg(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('网络失败，请联系管理员', {icon: 2});
                }
            });
        }

    });
</script>
{include file="common/footer"/}
</body>
</html>
